<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>24_遍历-v-for中key属性</title>
  <!-- 
  在 Vue 中， `v-for`  指令用于遍历数组或对象，并生成对应的 DOM 元素。在使用  `v-for`  时，推荐为每个循环生成的元素提供一个唯一的  `key`  属性。
  1.  `key`  属性的作用
  - 唯一标识： `key`  属性用于唯一标识每个元素，帮助 Vue 在更新虚拟 DOM 时更高效地识别元素。
  - 性能优化：通过提供  `key` ，Vue 可以在更新时更准确地复用和重新排序元素，减少不必要的 DOM 操作，从而提高性能。
  - 状态保持：当元素的状态（如输入框的值）需要保持时，使用  `key`  可以确保状态与对应的元素正确关联。

  2. 使用方法
  在  `v-for`  中使用  `key`  的基本语法如下：
  <template>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </template>

  <script>
  export default {
    data() {
      return {
        items: [
          { id: 1, name: 'Item 1' },
          { id: 2, name: 'Item 2' },
          { id: 3, name: 'Item 3' },
        ],
      };
    },
  };
  </script>
  在这个例子中， `key`  属性被设置为  `item.id` ，确保每个列表项都有唯一标识。

  3. 选择合适的  `key` 
  - 使用唯一值： `key`  应该是一个在列表中唯一的值，通常使用数据库中的唯一标识符（如 ID）。
  - 避免使用索引：虽然可以使用数组的索引作为  `key` ，但不推荐这样做。如果列表项的顺序可能会变化，使用索引可能导致状态错误和性能问题。

  4. 影响
  - 避免重复渲染：提供  `key`  可以帮助 Vue 避免在重新渲染时不必要的元素创建和销毁。
  - 提高性能：在大量数据渲染时，使用  `key`  可以显著提高性能，确保渲染过程更高效。

  5. 总结
  -  `key`  属性：在  `v-for`  中用于唯一标识每个元素，帮助 Vue 更高效地更新 DOM。
  - 性能优化：通过提供  `key` ，可以提高渲染性能并保持元素的状态。
  - 使用唯一值：推荐使用唯一标识符作为  `key` ，避免使用数组索引。
  -->
</head>
<body>
  
  <div id="app">
    <ul>
      <!-- key要求是唯一: id -->
      <li v-for="item in letters" :key="item">{{item}}</li>
    </ul>
    <button @click="addLetter">添加字母</button>
  </div>
  <script src="../lib/vue.js"></script>
  <script>
    const { createApp, ref } = Vue
    createApp({
      setup() {
        const letters = ref(['a', 'b', 'c', 'e'])

        function addLetter() {
          letters.value.splice(2, 0, "f")
        }

        return {
          letters,
          addLetter
        }
      }
    }).mount('#app')

  </script>
  
</body>
</html>